<template>
	<view class="content">
		<view v-if="!loading" class="info-con">
			<view class="flex-row">
				<view>就诊人姓名：</view>
				<view class="info-text">
					<u--text color="#000000" mode="name" :text="infoDetail.patientName" format="encrypt"></u--text>
				</view>
			</view>
			<u-line color="#E7E7E7"></u-line>
			<view class="flex-row">
				<view>就诊卡号：</view>
				<view class="info-text">
					<u--text color="#000000" mode="name" :text="infoDetail.userCard" format="encrypt"></u--text>
				</view>
			</view>
			<u-line color="#E7E7E7"></u-line>
			<view class="flex-row">
				<view>就诊卡类型：</view>
				<view class="info-text">住院号</view>
			</view>
			<u-line color="#E7E7E7"></u-line>
			<view class="flex-row">
				<view>住院科室：</view>
				<view class="info-text">{{infoDetail.admDeptName}}</view>
			</view>
			<u-line color="#E7E7E7"></u-line>
			<view class="flex-row">
				<view>住院预交金额：</view>
				<view class="info-text" style="color: #FF1212;">￥{{infoDetail.depositAmount}}</view>
			</view>
			<u-line color="#E7E7E7"></u-line>
			<view class="flex-row">
				<view>住院已用金额：</view>
				<view class="info-text" style="color: #FF1212;">￥{{infoDetail.totalAmount}}</view>
			</view>
			<u-line color="#E7E7E7"></u-line>
			<view class="flex-row">
				<view>住院押金余额：</view>
				<view class="info-text" style="color: #FF1212;">￥{{infoDetail.depositBalanceAmount}}</view>
			</view>
		</view>
		<view v-if="!loading" class="book-but">
			<u-button type="primary" text="解除绑定" plain @click="removeUser"></u-button>
		</view>
		<u-loading-page :loading="loading" loading-text="加载中..."></u-loading-page>
	</view>
</template>

<script>
	import {
		infoApi,
		removeApi,
	} from "@/api/user"
	export default {
		data() {
			return {
				loading: true,
				infoDetail: {},
				id: '',
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getInfo(option.id)
		},
		methods: {
			async getInfo(id) {
				try {
					const res = await infoApi(id)
					this.infoDetail = res.data
					this.loading = false
				} catch (e) {
					this.loading = false
				}

			},
			async removeUser() {
				uni.showLoading()
				try {
					const res = await removeApi(this.id)
					const selectUser = uni.getStorageSync('hospitalUser')
					if (selectUser.id == this.id) {
						uni.removeStorageSync('hospitalUser')
					}
					uni.hideLoading()
					uni.showToast({
						title: '操作成功',
						icon: 'icon'
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				} catch (e) {
					uni.hideLoading()
				}
			},
		}

	}
</script>

<style scoped>
	.content {
		width: 100vw;
		min-height: 100%;
		box-sizing: border-box;
		background: #F8F8F8;
		color: #666666;
		font-size: 27rpx;
	}

	.info-con {
		width: 750rpx;
		padding: 0 31rpx;
		box-sizing: border-box;
		background: #FFFFFF;
	}

	.flex-row {
		display: flex;
		align-items: center;
		padding: 21rpx 0;
	}

	.info-text {
		margin-left: auto;
		color: #000000;
	}

	.book-but {
		width: 688rpx;
		height: 85rpx;
		margin: 0 auto;
		margin-top: 92rpx;
	}
</style>